import React from "react";
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { Canvas, extend, useThree } from "@react-three/fiber";
import { useRef } from "react";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
extend({ OrbitControls });
import { DownOutlined } from "@ant-design/icons";
import type { MenuProps } from "antd";
import { Dropdown, message, Space } from "antd";
import R from '../../components/AiHome/AiHome.jsx'
const Orbit = () => {
  const { camera, gl } = useThree();
  // eslint-disable-next-line react/no-unknown-property
  return <orbitControls args={[camera, gl.domElement]} />;
};
function Dren() {
  const mySelfRef = useRef();
const onClick: MenuProps["onClick"] = ({ key }) => {
    message.info(`Click on item ${key}`);
  };

  const items: MenuProps["items"] = [
    {
      label: "动画一",
      key: "1",
    },
    {
      label: "动画2",
      key: "2",
    },
    {
      label: "动画3",
      key: "3",
    },
  ];
  // 导入人物文件
  const model = useLoader(
    GLTFLoader,
    "https://models.readyplayer.me/64b7457894a6ef343b6a6e02.glb"
  );
  return (
    <>
      <div style={{ height: "100%", width: "50%" }}>
        <Dropdown menu={{ items, onClick }}>
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              动画组
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
        <R></R>
        {/* <Canvas
          // style={{ backgroundColor: "black" }}
          camera={{ position: [1, 1, 2] }}
        >
          <Orbit />

          <mesh ref={mySelfRef}>
            <hemisphereLight intensity={1.5} groundColor="black" />
            <ambientLight />
            <primitive object={model.scene} scale={0.7} position={[0, -1, 0]} />
          </mesh>
        </Canvas> */}
      </div>
    </>
  );
}

export default Dren;
